<template>
  <a-card
    :bordered="false"
    title="项目进度">
    <div>
      <div>
        <span style="float: left">2021-01-01</span>
        <span style="float: right">2021-10-01</span>
      </div>
      <a-progress :percent="percent" />
      <a-divider />
      <div v-for="task in tasks" :key="task.taskId" :style="{marginTop: '30px'}">
        <a-card>
          <h1>{{ task.taskName }}</h1>
          <div v-for="subtask in task.children" :key="subtask.taskId" >
            <a-row :gutter="24" >
              <a-col :md="24">
                <span class="taskName" style="line-height: 32px;margin-top: 10px">{{ subtask.taskName }}</span>
              </a-col>
              <a-col :md="24">
                <a-steps style="margin-top: 10px" :current="computeCurrent(subtask.children)">
                  <a-step
                    v-for="item in subtask.children"
                    :key="item.taskId"
                    :title="item.taskName" />
                </a-steps>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </div>
    </div>
  </a-card>
</template>

<script>
import { getTaskList } from '@/api/manage'
import { computeCurrent } from './config'
export default {
  name: 'ProjectProgress',
  props: {
    project: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.computeCurrent = computeCurrent
    return {
      tasks: undefined,
      percent: 0
    }
  },
  created () {},
  mounted () {
    this.getTask()
  },
  methods: {
    getTask () {
      getTaskList({ page: 1, limit: 9999, projectId: this.project.projectId }).then(res => {
        this.tasks = res.data
        this.computePercent(this.tasks)
      })
    },
    computePercent (tasks) {
      let total = 0
      tasks.map(firstTask => {
        // 1 级任务总权重
        const currentPart = firstTask.proportion * 100
        firstTask.children && firstTask.children.map(secondTask => {
            if (secondTask.progress === 1) {
              total += currentPart / firstTask.children.length
            }
        })
      })
      this.percent = Math.ceil(total)
    }
  }
}
</script>
<style lang="less" scoped>
.taskName{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
</style>
